<template>
  <div>
    <div class="wrap">

      <div class="affix-container">
        <sweet-affix target=".affix-container" :offset="200">
          <sweet-button type="primary">Target container</sweet-button>
        </sweet-affix>
      </div>

      <!-- 菜单 -->
      <!-- <sweetMenu /> -->

      <sweet-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> Title </span>
        </template>
      </sweet-page-header>

      <sweet-pagination
        layout="prev, pager, next"
        :total="1000"
      ></sweet-pagination>
      <sweet-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="sizes, prev, pager, next"
        :total="1000"
      ></sweet-pagination>

      <sweet-breadcrumb separator="/">
        <sweet-breadcrumb-item>首页</sweet-breadcrumb-item>
        <sweet-breadcrumb-item>活动管理</sweet-breadcrumb-item>
        <sweet-breadcrumb-item>活动列表</sweet-breadcrumb-item>
        <sweet-breadcrumb-item>活动详情</sweet-breadcrumb-item>
      </sweet-breadcrumb>

      <sweetSteps />

      <sweetAnchor />

    </div>
      
  </div>
</template>
<script>
import sweetMenu from './navigation-components/sweet-menu.vue';
import sweetSteps from './navigation-components/sweet-steps.vue';
import sweetAnchor from './navigation-components/sweet-anchor.vue';
export default {
  components: { sweetMenu, sweetSteps, sweetAnchor },
  data() {
    return {
      currentPage: 1,
      pageSize: 100,
    };
  },
}
</script>

<style scoped>
.wrap {
  height: 700px;
  overflow: auto;
}
.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: #ecf5ff;
}
</style>